<template>
	<view class="container f fac fpc">
		<view class="welcome">欢迎您使用工具箱</view>
		
		<view class="box f fv fac fpc">
			<image src="../../common/images/logo.png" mode="aspectFit"></image>
			<view class="name">实用工具箱</view>
			<button type="primary" @click="goIndex">开始使用</button>
		</view>
		
		<view class="bg"></view>
	</view>
</template>

<script setup>
	const goIndex = () => {
		uni.navigateTo({
			url: "/pages/index/index"
		})
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		position: relative;
		.welcome {
			position: absolute;
			top: 200rpx;
			left: 0;
			width: 100%;
			text-align: center;
			font-size: 72rpx;
		}
		.box {
			width: 80%;
			image {
				width: 200rpx;
				height: 200rpx;
			}
			.name {
				font-size: 36rpx;
				font-weight: bold;
			}
			button {
				width: 100%;
				margin-top: 24rpx;
			}
		}
		.bg {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 200rpx;
			background: url("../../common/images/bottom.png") center no-repeat;
		}
	}
</style>
